<template>
  <view class="category">
    <my-search></my-search>
    <view class="mian">
      <view class="menus">
        <view :class="['item',index===current?'active':'']" v-for="(item,index) in menus" :key="item" @click="activeFn(index)">
          {{item}}
        </view>
      </view>
      <scroll-view class="goods" scroll-y :scroll-top="scrollTop">
          <view class="goods-group" v-for="item in goodsList" :key="item.cat_pid">
            <view class="goods-group-title">
              {{item.cat_name}}
            </view>
            <view class="goods-group-content">
              <navigator :url="'/pages/goods_list/goods_list?cid='+itemA.cat_id"
              class="goods-item" v-for="itemA in item.children" :key="itemA.cat_pid">
                <image :src="itemA.cat_icon"></image>
                <view class="goods-name u-line-2">{{itemA.cat_name}}</view>
              </navigator>
            </view>
          </view>
        </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data(){
    return{
      categoryList:[],
      goodsList:[],
      menus:[],
      current:0,
      scrollTop:0
    }
  },
  onLoad(){
    const category=uni.getStorageSync("category");
    console.log(category);
    if(!category){
      console.log("没缓存");
      this.getCategory()
    }else{
      if(Date.now()-category.time>1000*10){
        console.log("过期了");
        this.getCategory()
      }else{
        console.log("有缓存没过期");
        console.log(category.data);
        this.getCategoryList(category.data)
      }
    }
  },
  methods:{
    activeFn(index){
      this.current=index
      this.goodsList=this.categoryList[this.current].children
      let num=0.001
      if(this.scrollTop===num){
        num=num/10
      }
      this.scrollTop=num
    },
    async getCategory(){
      const {message}=await uni.$u.http.get("/categories")
      this.getCategoryList(message)
    },
    getCategoryList(message){
    this.categoryList=message
    this.menus=this.categoryList.map(item=>item.cat_name)
    this.goodsList=this.categoryList[this.current].children
    uni.setStorageSync("category", {data:message,time:Date.now()});
    },
    
  }
}
</script>

<style lang="scss" scoped>
.category{
  height: 100vh;
  display: flex;
  flex-direction: column;
  .mian {
    flex: 1;
    display: flex;
    overflow: hidden;
    .menus {
      width: 182rpx;
      overflow: auto;
      .item {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        font-size: 28rpx;
      }
      .active{
        color: #ff2d4a;
        border-left: 2px solid #ff2d96;
      }
    }
  }
  .goods {
    flex: 1;
    overflow: auto;
    .goods-group {
      .goods-group-title {
        height: 80rpx;
        display: flex;  
        align-items: center;
        justify-content: center;
        color: #666;
        font-size: 28rpx;
        &::after{
          content:"/";
          margin-left: 30rpx;
          color: #ccc;
        }
        &::before{
          content:"/";
          margin-right: 30rpx;
          color: #ccc;
        }
      }
      .goods-group-content {
        display: flex;
        flex-wrap: wrap;
        .goods-item {
          width: 33.33%;
          display: flex;
          flex-direction: column;
          align-items: center;
          image {
            width: 120rpx;
            height: 120rpx;
            background-color: #ccc;
          }
          .goods-name {
            color: #666;
            font-size: 28rpx;
          }
        }
      }
    }
  }
}
</style>